<template>
    <div class="media-center">
    <el-container>
        <el-aside width="240px" class="leftMain">
          <div class="main-title">{{ $t('栏目管理') }}</div>
            <Tree showMinType="2" @click="handleTreeClick"></Tree>
        </el-aside>
        <el-main class="rightMain">
          <bs-main height="calc(100% - 44px)">
            <Condition slot="header" @refresh="handelRefresh" @search="handleSearch"></Condition>
            <list
              height="calc( 100% - 15px )"
              ref="list"
              class="center"
              :showIndex="false"
              :table-tag="tableName"
              :list-data="mediaData"
              :has-select="true"
              :list-cols="listCols"
              :init-cols-props.sync="initColsProps"
              :init-headmune-flag="initHeadmuneFlag"
              :action-opts="actionOpts"> 
              <template slot="originalLinkSlot" slot-scope="{row}"> 
                <a :href="row.originalLink" target="_blank"> 点击查看 </a>
              </template>
              <template slot="actionSlot" slot-scope="{ row }"> 
                <el-button @click.native="handelPreviewTemplate(row)" size="mini">查看</el-button>
            </template>
            </list>
            <pagination slot="footer" :total="pageData.total" :page="pageData.page" :limit="pageData.limit" :showAllChecked="true" :allChecked="allSize" @all="handleChangeAllSize" @pagination="doList"></pagination>
          </bs-main>
        </el-main>
    </el-container>
    <preview-dialog :visible.sync="showPreviewDialog" :pre-data="previewData" />
  </div>
</template>

<script> 
import Condition from './components/Condition.vue'
import Tree from './components/ChannelTree.vue'
import List from '@/components/List'
import Pagination from '@/components/Pagination'
import NewsApi from '@/api/news.js'
import PreviewDialog from './components/PreviewDialog'

export default {
    data() {
        return {
            mediaData: [],
            tableName: 'RongMediaTable',
            listCols: [
                {label: '序号', prop: 'id', width: 50},
                {label: '新闻标题', prop: 'title', minwidth: 250},
                {label: '作者', prop: 'author'},
                {label: '来源', prop: 'source'},
                {label: '原链接', prop: 'originalLink',width:120, slot: true},
                {label: '发布时间', prop: 'publishTime', width: 140},
                {label: '取搞日期', prop: 'pushTime', width: 140},
            ],
            initColsProps: ['id', 'title', 'author', 'source', 'originalLink', 'publishTime','pushTime'],
            actionOpts: {
                show: true,
                align: 'center',
                width: '60px',
                hidEditBtn: true,
                hidDelBtn: true,
                name: '操作',
                slot: true,
            },
            initHeadmuneFlag: false,
            pageData: {
                page: 1,
                total: 0,
                limit: 15
            },
            queryData: { channelId: 0,queryType:0 },
            allSize: false,
            pageType: '2',
            rowID: '0',
            previewData: {},
            showPreviewDialog: false,
        }
    }, 
    components: {
        List, Pagination, Condition, Tree, PreviewDialog
    },
    mounted() {
        this.$nextTick(() => {
            this.doList({page:1})
        })
    },
    methods: {
        // 查询列表
        async doList(current) {
            if(current) {
                this.pageData = {
                ...this.pageData,
                ...current
                }
            }
            var queryData = this.$data.queryData
            queryData.current = this.pageData.page
            queryData.size = this.pageData.limit
            queryData.channelId = this.queryData.channelId
            
            const res = await NewsApi.rongMediaList(queryData)
            if(res) {
                this.mediaData = res.records || []
                this.pageData.total = Number(res.total? res.total: 0)
            }
        },
        handleTreeClick(data) {
            this.queryData.channelId = data.id
            this.doList({page:1})
        },
        // 选择所有页
        handleChangeAllSize(val) {
            this.allSize = val
            this.$refs.list.clearSelection();
        },
        getActiveItem() {
            let items = this.$refs.list.getActiveItem()
            return items.length === 1 ? items[0] : items.length === 0 ? null : items
        },
        handelRefresh() { 
            this.doList({page:this.pageData.page})
        },
        handelPreviewTemplate(row) {
            this.previewData = {
                ...row
            }
            this.showPreviewDialog = true
        },
        handleSearch(data) {
            console.log('handleSearch',data)
            this.queryData = {
                ...this.queryData,
                ...data
            }
            this.doList({page:1})
        }
        
    }
}
</script> 
